<template>
  <div class="task-wrapper" :style="{ 'height': documentClientHeight + 'px' }">
    <div class="left">
      <Menu @openTaskFormDialog="openModuleDialog(false)" :forbidButton="!canCreateModule" @selectMenu="selectTab" :menuList="menuList" :title="'创建版块'" />
    </div>
    <div class="right">
      <div class="content-header">{{menuList[currentMenuIndex-1].name}}</div>
      <div class="content-wrapper">
        <div class="content" v-infinite-scroll="loadData" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
          <div v-for="moduleItem in moduleList" :key="moduleItem.id" @click="goProjectListUnderModule(moduleItem.id)" class="module-item">
            <div class="module-cover">
              <img :src="moduleItem.plateImg ? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/module/'+moduleItem.plateImg : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/module/icon-1.png'"  style="width: 70px; height: 70px; border-radius: 5px;display:block;">
            </div>
            <div class="module-name">{{moduleItem.plateName}}</div>
            <div class="module-desc"><div>{{moduleItem.plateInfo}}</div></div>
            <div class="module-owner"><img :src="moduleItem.plateManagerAvatar" alt="">{{moduleItem.plateManagerName}}</div>
            <div class="tool"><i class="el-icon-setting" @click.stop="openModuleDialog(moduleItem)"></i></div>
          </div>
          <img v-if="( (moduleList.length === 0 && !showProject) || (projectList.length === 0 && showProject ) ) && !isFirstLoading" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
        </div>
      </div>
      <div style="text-align: center;margin-top: 8px;color: #909399;" v-if="!showProject">共有{{totalCount}}个版块</div>
      <div style="text-align: center;margin-top: 8px;color: #909399;" v-else>共有{{totalCount}}个项目</div>
    </div>
    <el-dialog :title="title" :visible.sync="moduleDialog" width="800px" :close-on-click-modal="false">
      <div class="dialog-wrapper">
        <div class="module-edit-main">
          <div class="module-left">
            <div :class="{'active': moduleDialogStatus === 1}" class="menu-item" @click="moduleDialogStatus = 1"><i class="menu-icon el-icon-document"></i>基本信息</div>
            <div :class="{'active': moduleDialogStatus === 2}" class="menu-item" @click="moduleDialogStatus = 2"><i class="menu-icon el-icon-user"></i>人员范围</div>
            <div :class="{'active': moduleDialogStatus === 3}" class="menu-item" @click="moduleDialogStatus = 3"><i class="menu-icon el-icon-thumb"></i>更多操作</div>
          </div>
          <div class="module-right">
            <el-form v-if="moduleDialogStatus === 1" label-position="top">
              <el-form-item label="版块名称" style="position: relative;">
                <template slot="label">版块名称<span style='color:red;'>*</span></template>
                <el-input style="width: calc(100% - 90px);"  :disabled="!canEdit" v-model="form.plateName" placeholder="必填项，限制字符15个"></el-input>
                <div class="module-cover">
                  <img :src="form.plateImg ?'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/module/'+form.plateImg : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/module/icon-1.png'"  style="width: 70px; height: 70px;display:block;border-radius: 5px;">
                  <div v-if="canEdit" class="click-block" @click="openCoverChange">更换图片</div>
                </div>
              </el-form-item>
              <el-form-item label="版块简介">
                <template slot="label">版块简介<span style='color:red;'>*</span></template>
                <el-input :disabled="!canEdit" type="textarea" v-model="form.plateInfo" :rows="5"></el-input>
              </el-form-item>
            </el-form>
            <div class="members-select" v-if="moduleDialogStatus === 2">
              <div class="project-owner">
                <el-form label-position="top">
                  <el-form-item style="border-bottom: 1px solid #ECECEC; margin-bottom: 10px; padding-bottom: 10px;" label="版块管理员">
                    <template slot="label">版块管理员<span style='color:red;'>*</span><span style='color:red;margin-left:10px;font-size:12px;font-weight:normal;'>拥有版块和版块下项目任务的所有权限</span></template>
                    <div class="select-btn" v-if="form.plateManagerNameArr.length > 0">
                      <span><img :src="form.plateManagerAvator[0]"/></span>{{form.plateManagerNameArr[0]}}
                      <div v-if="canEdit" class="del" @click="delMember('plateManagerIdArr','plateManagerName','plateManagerId', 'plateManagerAvator', 'plateManagerNameArr', idx)">移除</div>
                    </div>
                    <div v-else @click="selectDingUsers('plateManagerIdArr','plateManagerName','plateManagerId', 'plateManagerAvator', 'plateManagerNameArr',1)" class="select-btn"><span><i class="el-icon-plus"></i></span>请选择</div>
                  </el-form-item>
                  <el-form-item style="border-bottom: 1px solid #ECECEC; margin-bottom: 10px; padding-bottom: 10px;" label="版块观察者">
                    <div @click="selectDingUsers('plateObserverIdArr','plateObserverName','plateObserverId', 'plateObserverAvator', 'plateObserverNameArr', 300)" class="select-btn"><span><i class="el-icon-plus"></i></span>添加</div>
                    <div class="select-btn" v-for="(member, idx) in form.plateObserverNameArr" :key="member">
                      <span><img :src="form.plateObserverAvator[idx]"/></span>{{member}}
                      <div v-if="canEdit" class="del" @click="delMember('plateObserverIdArr','plateObserverName','plateObserverId', 'plateObserverAvator', 'plateObserverNameArr', idx)">移除</div>
                    </div>
                  </el-form-item>
                  <el-form-item style="border-bottom: 1px solid #ECECEC; margin-bottom: 10px; padding-bottom: 10px;" label="项目管理员">
                    <template slot="label">项目管理员<span style='color:red;'>*</span><span style='color:red;margin-left:10px;font-size:12px;font-weight:normal;'>拥有板块下创建项目的权限，不可见他人创建的私有项目</span></template>
                    <div @click="selectDingUsers('plateProjectManagerIdArr','plateProjectManagerName','plateProjectManagerId', 'plateProjectAvator', 'plateProjectManagerNameArr', 300)" class="select-btn"><span><i class="el-icon-plus"></i></span>添加</div>
                    <div class="select-btn" v-for="(member, idx) in form.plateProjectManagerNameArr" :key="member">
                      <span><img :src="form.plateProjectAvator[idx]"/></span>{{member}}
                      <div v-if="canEdit" class="del" @click="delMember('plateProjectManagerIdArr','plateProjectManagerName','plateProjectManagerId', 'plateProjectAvator', 'plateProjectManagerNameArr', idx)">移除</div>
                    </div>
                  </el-form-item>
                  <el-form-item label="可见范围">
                    <el-radio :disabled="!canEdit" v-model="form.plateRange" label="1">所有人</el-radio><br>
                    <el-radio :disabled="!canEdit" v-model="form.plateRange" label="2">版块管理员、项目管理员、项目成员</el-radio>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="more-action" v-if="moduleDialogStatus === 3">
              <el-form label-position="top">
                <el-form-item style="border-bottom: 1px solid #ECECEC; margin-bottom: 10px; padding-bottom: 20px;">
                  <template slot="label"><span style="font-size: 16px;margin-right: 10px;">导出任务</span><span style="font-weight: 100;font-size:13px;">将版块内的任务导出为 Excel 制作报表</span></template>
                  <el-button :disabled="!canMoreEdit " @click="exportTask" size="small">导出</el-button>
                </el-form-item>
                <el-form-item style="border-bottom: 1px solid #ECECEC; margin-bottom: 10px; padding-bottom: 20px;">
                  <template slot="label"><span style="font-size: 16px;margin-right: 10px;">归档版块</span><span style="font-weight: 100;font-size:13px;">如版块已完成或需要隐藏，可归档版块</span></template>
                  <el-button :disabled="!canMoreEdit" @click="archive" size="small">归档</el-button>
                </el-form-item>
                <el-form-item style="margin-bottom: 10px; padding-bottom: 20px;">
                  <template slot="label"><span style="font-size: 16px;margin-right: 10px;">删除版块</span><span style="font-weight: 100;font-size:13px;">删除版块</span></template>
                  <el-button :disabled="!canMoreEdit" @click="delModule" size="small">删除</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="module-action clearfix">
          <div class="tips" style="float:left;line-height: 50px;padding-left: 20px;color:#BDBDBD;font-size: 12px;">
            仅版块管理员可修改
          </div>
          <div style="float:right;line-height: 50px; margin-right: 20px;">
            <el-button v-if="canEdit" @click="saveModule" type="primary" size="small">保存</el-button>
            <el-button @click="moduleDialog = false;" size="small">关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="选择图片" :visible.sync="coverDialog" width="440px">
      <div class="cover-wrapper">
        <div v-for="cover in 15" :key="cover">
          <img :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/module/icon-' + cover + '.png'" style="width: 70px; height: 70px;border-radius: 5px;display: block;">
          <div class="click-block" @click="selectCover('icon-' + cover + '.png')">选择</div>
        </div>
      </div>
    </el-dialog>
    <project-detail ref="ProjectDetail" v-if="projectDetailVisible"></project-detail>
  </div>
</template>

<script>
import Menu from './component/Menu'
import ProjectDetail from './project-detail'
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'

export default {
  data() {
    return {
      documentClientHeight: '',
      coverDialog: false,
      projectDetailVisible: false,
      menuList: [{
        index: 1,
        name: '我管理的'
      },{
        index: 2,
        name: '我参与的'
      },{
        index: 3,
        icon: 'el-icon-box',
        isFolder: true,
        name: '已归档版块'
      }],
      addOrUpdateVisible: false,
      currentMenuIndex: 1,
      moduleList: [],
      moduleDialog: false,
      showProject: false,
      projectList: [],
      curModuleId: '',
      projectIds: [],
      form: {
        plateName: '',
        plateImg: 'icon1.png',
        plateInfo: '',
        plateRange: '1',
        plateManagerId: '',
        plateManagerName: '',
        plateManagerNameArr: [],
        plateManagerIdArr: [],
        plateManagerAvator: [],
        plateObserverId: '',
        plateObserverName: '',
        plateObserverAvator: [],
        plateObserverIdArr: [],
        plateObserverNameArr: [],
        plateProjectManagerId: '',
        plateProjectManagerName: '',
        plateProjectAvator: [],
        plateProjectManagerNameArr: [],
        plateProjectManagerIdArr: [],
        plateStatus: '2'
      },
      formVerify: {
        plateName: '请输入版块名称',
        plateInfo: '请输入版块简介',
        plateManagerId: '请选择版块管理员',
        plateProjectManagerId: '请选择项目管理员',
      },
      moduleDialogStatus: 1,
      isFirstLoading: true,
      loading: false,
      page: 1,
      limit: 30,
      totalPage: 1,
      totalCount: 0
    }
  },
  components: {
    Menu, ProjectDetail
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    },
    title() {
      return this.form.id ? '编辑版块': '新增版块'
    },
    canCreateModule() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1260854998536855554')
    },
    canEdit() {
      return (this.form.plateStatus === '2' && this.form.hasPlateAuthority === '1' && !!this.form.id) || (!this.form.id)
    },
    canMoreEdit() {
      return this.form.plateStatus === '2' && this.form.hasPlateAuthority === '1' && !!this.form.id
    },
  },
  mixins: [dingMixin],
  methods:{
    openCoverChange() {
      this.coverDialog = true;
    },
    selectCover(img) {
      this.coverDialog = false;
      this.form.plateImg = img
    },
    delMember(ids, name, idsStr, avator, names, idx) {
      this.form[avator].splice(idx,1); 
      this.form[names].splice(idx,1); 
      this.form[ids].splice(idx,1); 
      this.form[name] = this.form[names].join(',')
      this.form[idsStr] = this.form[ids].join(',')
    },
    selectDingUsers(ids, name, idsStr, avator, names, num){
      if(!this.canEdit) return;
      this.complexPicker(num, [], this.form[ids]).then((data)=>{
        this.form[ids] = data.map(item => item.emplId);
        this.form[avator] = data.map(item => item.avatar)
        this.form[names] = data.map(item => item.name)
        this.form[name] = this.form[names].join(',');
        this.form[idsStr] = this.form[ids].join(',')
      })
    },
    loadData() {
      this.loading = true;
      this.page ++;
      this.getModuleList();
    },
    selectTab(currentMenuIndex) {
      this.showProject = false;
      if (currentMenuIndex != this.currentMenuIndex){
        this.currentMenuIndex = currentMenuIndex;
        this.getModuleList(true);
      }
    },
    async openModuleDialog(item) {
      if(item) {
        let editData = await this.$httpN.postB('division/plate/info', {id: item.id});
        editData.plateManagerNameArr = editData.plateManagerName.split(',');
        editData.plateManagerIdArr = editData.plateManagerId.split(',');
        editData.plateManagerAvator = editData.plateManagerAvatar.split(',');
        editData.plateProjectManagerNameArr = editData.plateProjectManagerName.split(',');
        editData.plateProjectManagerIdArr = editData.plateProjectManagerId.split(',');
        editData.plateProjectAvator = editData.plateProjectManagerAvatar.split(',');
        editData.plateObserverNameArr = editData.plateObserverName === '' ? [] : editData.plateObserverName.split(',');
        editData.plateObserverIdArr = editData.plateObserverId === '' ? [] : editData.plateObserverId.split(',');
        editData.plateObserverAvator = editData.plateObserverAvatar === '' ? [] : editData.plateObserverAvatar.split(',');

        this.form = editData;
      }else {
        formUtil.resetData(this.form);
        this.form.plateImg = 'icon-1.png';
        this.form.plateRange = '1';
      }
      this.moduleDialogStatus = 1;
      this.moduleDialog = true;
    },
    async saveModule() {
      if(!formUtil.verifyData(this.form, this.formVerify)) return;
      if(this.form.plateName.length > 15) return this.$message.error('版块名称不要超过15个字')
      if(this.form.id) {
        if(!await this.$httpN.postB('division/plate/update', this.form, false)) return;
        formUtil.submitSuccess('修改成功');
      }else {
        if(!await this.$httpN.postB('division/plate/save', this.form, false)) return;
        formUtil.submitSuccess('添加成功');
      }
      this.moduleDialog = false;
      this.getModuleList(true);
    },
    async getModuleList(init) {
      if(init) {
        this.page = 1;
        this.moduleList = [];
        this.isFirstLoading = true;
      }
      if(this.currentMenuIndex === 3) {
        var {list, totalCount, totalPage} = await this.$httpN.postB('division/plate/archiveList', {
          page: this.page,
          limit: this.limit
        })
      }else {
        var {list, totalCount, totalPage} = await this.$httpN.postB('division/plate/list', {
          page: this.page,
          limit: this.limit,
          participateType: this.currentMenuIndex
        })
      }
      this.loading = false;
      this.moduleList.push(...list);

      if(init){
        this.totalPage = totalPage;
        this.totalCount = totalCount
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    goProjectListUnderModule(id) {
      this.$router.push({ name: 'livolobim-project', query: {moduleId: id}});
    },
    async exportTask() {
      let fileData = await this.$httpN.get('division/plate/export/' + this.form.id, {}, 'blob');
      this.downFile(fileData, this.form.plateName + '.xls');
    },
    downFile(blob, fileName) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
      }
    },
    async archive() {
      formUtil.submitConfirm('是否将此版块归档', async ()=> {
        if(!await this.$httpN.postB('division/plate/archive', {id: this.form.id}, false)) return;
        formUtil.submitSuccess('归档成功');
        this.moduleDialog = false;
        this.getModuleList(true);
      })
    },
    async delModule() {
      formUtil.submitConfirm('此操作将永久删除版块, 是否继续?', async ()=> {
        if(!await this.$httpN.postB('division/plate/delete', {id: this.form.id}, false)) return;
        formUtil.submitSuccess('删除成功');
        this.moduleDialog = false;
        this.getModuleList(true);
      })
    }
  },
  async mounted() {
    this.documentClientHeight = document.documentElement['clientHeight'] - 50
    window.onresize = () => {
      this.documentClientHeight = document.documentElement['clientHeight'] - 50
    }
    this.getModuleList(true);
  }
}
</script>

<style lang="scss" scoped>
  .content-wrapper .content::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    scrollbar-arrow-color:red;
  }
  .content-wrapper .content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #DEDEDE;
    background: rgba(0,0,0,0.2);
    scrollbar-arrow-color:red;
  }
  .content-wrapper .content::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #F5F5F5;
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }
  .task-wrapper{
    display:flex;
    .left{
      width: 250px;
      height: 100%;
      z-index: 1;
      background: #FFF;
      box-shadow: 3px 0 4px #F0F0F0;
    }
    .right{
      flex:1 ;
      .content-header{
        line-height: 50px;
        background: #FFF;
        font-size: 16px;
        font-weight: bold;
        padding-left:25px;
        box-shadow: 0 3px 4px #F0F0F0;
      }
      .content-wrapper{
        height: calc(100% - 80px);
        padding: 20px 20px 0;
        .content{
          background: white;
          height: 100%;
          box-shadow: 4px 4px 4px rgb(221, 221, 221);
          overflow-y: auto;
          position: relative;
          .module-item{
            position: relative;
            border-bottom: 1px solid #ECECEC;
            padding: 15px 15px;
            padding-left: 100px;
            cursor: pointer;
            .module-cover{
              position: absolute;
              height: 70px;
              width: 70px;
              color: white;
              line-height: 70px;
              text-align: center;
              border-radius: 5px;
              top: 15px;
              left: 15px;
              font-size: 40px;
            }
            img{
              height: 20px;
              width: 20px;
              border-radius: 50%;
              margin-right: 6px;
              position: relative;
              top: -2px;
            }
            .module-name{
              width: calc(100% - 50px);
              min-height: 16px;
            }
            .module-desc{
              width: calc(100% - 50px);
              font-weight: 400;
              font-size: 13px;
              color: #979797;
              margin-top: 3px;
              height:30px;
              display: flex;
              align-items: center;
              div{
                line-height: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
            .module-owner{
              margin-top: 3px;
              color: #979797;
              font-size: 12px;
            }
            &:hover .tool {
              display: block;
            }
            .tool {
              position: absolute;
              top: 38px;
              right: 25px;
              display: none;
              i {
                font-size: 24px;
                color: #79828C;
              }
            }
          }
          .project-wrapper {
            width: 25%;
            float: left;
            padding: 20px;
            .task-item{
              position: relative;
              background: #FFF;
              width: 100%;
              height: 155px;
              box-sizing: border-box;
              border: 1px solid #D3E3E8;
              border-radius: 5px;
              box-shadow: 0px 0px 1px rgb(221, 221, 221);
              padding: 30px 45px;
              cursor: pointer;
              &:hover{
                box-shadow: 0px 0px 4px rgb(221, 221, 221);
              }
              &:hover .tool {
                display: block;
              }
              .tool {
                position: absolute;
                right: 25px;
                display: none;
                i {
                  font-size: 18px;
                  color: #79828C;
                }
              }
              .arrow-status{
                width:0;
                height:0;
                position: absolute;
                top: 0;
                left: 0;
                border-top-left-radius: 5px;
                border-top:solid 30px #4495FF;
                border-left:solid 30px #4495FF ;
                border-bottom:solid 30px transparent;
                border-right:solid 30px transparent;
                &.arrow-1{
                  border-top:solid 30px #4495FF;
                  border-left:solid 30px #4495FF ;
                }
                &.arrow-2{
                  border-top:solid 30px #E6A23C;
                  border-left:solid 30px #E6A23C ;
                }
                &.arrow-3{
                  border-top:solid 30px #B0C7CD;
                  border-left:solid 30px #B0C7CD ;
                }
                &.arrow-4{
                  border-top:solid 30px #909399;
                  border-left:solid 30px #909399 ;
                }
              }
              .task-status{
                position: absolute;
                width: 60px;
                line-height: 20px;
                left: -6px;
                top: 11px;
                color: white;
                font-size: 12px;
                transform: rotate(-45deg);
                text-align: center;
                font-weight: normal;
              }
              &::after{
                content: '';
                width:0;
                height:0;
                position: absolute;
                top: 0;
                left: 0;
                border-top-left-radius: 5px;
                border-top:solid 15px white;
                border-left:solid 15px white ;
                border-bottom:solid 15px transparent;
                border-right:solid 15px transparent;
              }
              .top{
                display:flex;
                margin-bottom: 10px;
                .logo{
                  width: 48px;
                  height: 48px;
                  text-align: center;
                  background: #E6A23C;
                  border-radius: 4px;
                  i{
                    line-height: 48px;
                    font-size: 30px;
                    color: #FFF;
                  }
                }
                .task-info{
                  p{
                    margin: 0;
                    padding-left:10px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    line-clamp: 1;
                    -webkit-box-orient: vertical;
                  }
                  .project{
                    margin-top: 15px;
                    span{
                      background: #FFDCDC;
                      color: #FF5050;
                      padding: 2px 6px;
                      border-radius: 3px;
                    }
                  }
                }
              }
              .bottom{
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                justify-content:space-between;
                align-content: flex-start;
                p{
                  margin: 5px 0 0 0 ;
                  color: #79828C;
                  i{
                    margin-right: 5px;
                  }
                }
                .overdue {
                  color: #FF5050;
                }
              }
            }
          }
        }
      }
    }
  }
  .dialog-wrapper{
    height: 550px;
    border-top: 1px solid #ECECEC;
    margin: -30px -20px;
    .module-edit-main{
      height: 500px;
      display: flex;
      border-bottom: 1px solid #ECECEC;
      .module-left{
        width: 145px;
        border-right: 1px solid #ECECEC;
        .menu-item{
          line-height: 40px;
          padding-left: 50px;
          color: #75797E;
          cursor: pointer;
          position: relative;
          &:hover{
            background: #F7F7F7;
          }
          .menu-icon{
            position:absolute;
            left: 24px;
            top: 11px;
            font-size: 18px;
            font-weight: normal;
          }
        }
        .menu-item.folder {
          color:black;
          font-size: 16px;
        }
        .menu-item.active{
          color: #4983FF;
          background: #ECF1FD;
          &::before{
            content: '';
            height: 100%;
            width: 5px;
            background: #4983FF;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
      .module-right{
        flex: 1;
        padding: 20px;
        overflow: auto;
        .select-btn{
          float:left;
          font-weight: normal;
          margin-right: 5px;
          margin-bottom: 10px;
          width: 80px;
          height: 28px;
          border-radius: 30px;
          background: #FAFAFA;
          border: 1px solid #ECECEC;
          position: relative;
          padding-left: 21px;
          line-height: 28px;
          color: #7982A7;
          font-size: 12px;
          text-align: center;
          cursor: pointer;
          span{
            position: absolute;
            top: 1px;
            left: 1px;
            display:block;
            height: 24px;
            width: 24px;
            background: #CACACA;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            img{
              width: 24px;
              height: 24px;
              border-radius: 50%;
            }
          }
          .del{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 30px;
            color: white;
            text-align: center;
            background:rgba(130, 130, 130, 0.9);
            display: none;
          }
          &:hover{
            .del{
              display: block;
            }
          }
        }
        .module-cover{
          position: absolute;
          height: 70px;
          width: 70px;
          background: #21D69A;
          color: white;
          line-height: 70px;
          text-align: center;
          border-radius: 5px;
          top: -34px;
          right: 0;
          font-size: 40px;
          cursor: pointer;
          .click-block{
            width: 100%;
            position: absolute;
            top:0;
            right: 0;
            background:rgba(130, 130, 130, 0.7);
            line-height: 70px;
            text-align: center;
            color: white;
            font-size: 12px;
            border-radius: 5px;
            display: none;
          }
          &:hover{
            .click-block{
              display: block;
            }
          }
        }
      }
    }
  }
  .cover-wrapper{
    display: flex;
    flex-wrap: wrap;
    div{
      height: 70px;
      width: 70px;
      background: #21D69A;
      color: white;
      line-height: 70px;
      text-align: center;
      border-radius: 5px;
      font-size: 40px;
      position: relative;
      margin: 5px;
      .click-block{
        width: 100%;
        position: absolute;
        top: -5px;
        left: -5px;
        background:rgba(130, 130, 130, 0.7);
        line-height: 70px;
        text-align: center;
        color: white;
        font-size: 12px;
        border-radius: 5px;
        display: none;
        cursor: pointer;
      }
      &:hover{
        .click-block{
          display: block;
        }
      }
    }
  }
  @media screen and (max-width: 1600px) {
    .task-wrapper .right .content-wrapper .content .project-wrapper {
      width: 33.3%;
    }
  }

  @media screen and (max-width: 1300px) {
    .task-wrapper .right .content-wrapper .content .project-wrapper {
      width: 50%;
    }
  }
</style>